{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/feedback.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12"> 
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>问题反馈</p>
            </div>
        </div>
    </div>
</header>
<!-- 问题反馈 -->
<div class="feedback ">
   <div class="feedWrap container">
       <p class="title">问题反馈</p>
       <form id="form">
           <div class="form-group">
               <textarea class="form-control" name="feed" cols="10" rows="5" maxlength="150" placeholder="请输入您的内容..."></textarea>
           </div>
           <div class="form-group">
               <div class="imgAdd">
                   <div class="imgBox imglen">
                       <img class="imgFile" src="__PUBLIC__phone/images/imgadd.png" alt="">
                       <input class="Imgfiles" name="file" id="upload-image" type="file">
                   </div>
               </div>
               <p class="remarks p1">*输入的内容字数范围限定150之内</p>
               <p class="remarks">*图片上传大小限制1M最多三张</p>
           </div>
           <div class="form-group text-center">
               <button type="button"  class="btn submitBtn"  data-toggle="modal">提交</button>
           </div>
       </form>
   </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body popwrap">
                <img class="img-responsive" src="__PUBLIC__phone/images/yes.png" alt=""/>
                <p>提交成功，感谢您的反馈</p>
                <p>我们会不断完善系统问题</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__phone/js/ajaxfileupload.js"></script>
<script type="text/javascript">
    $(function(){
        $(".imgAdd").on("change",".Imgfiles",function(){   //图片上传
            var _size = this.files[0]['size'];
            _size = _size/(1024*1024);
            if(_size >= 1){
                reminder('请上传1M以内的图片！');
                return false;
            }
            var name = $(this).attr('name');
            $.ajaxFileUpload({
                url: "/home/Index/uploadImage",
                type: 'post',
                data: {'name':name},
                secureuri: false,
                fileElementId: 'upload-image',
                dataType: 'json',
                success: function (data) {
                    if(data.code == '0'){
                        var len = $(".imglen").length;
                        imgAdd(data.msg);
                        if(len>=3){
                            delImg();
                        }
                    } else {
                        reminder(data.msg);
                    }
                },
                error: function (data) {
                    reminder('服务器异常！');
                }
            });
        });

        //删除图片
        $(".imgAdd").on("click",".closeBtn",function(){
            var len=$(".imgBox").length;
            $(this).parent(".imglen").remove();
            if(!len){
                addbtn();
            }
        })

        // 提交问题反馈
        var flag = true;
        $('.submitBtn').on('click', function () {
            if(!flag){   // 防止重复提交
                return false;
            }
            flag = false;
            var _feed = $('textarea[name="feed"]');
            if(!$.trim(_feed.val())){
                flag = true;
                _feed.val('');
                reminder('请输入你需要反馈的信息！');
                return false;
            }
            // 获取上传图片地址
            var _img = [];
            $('input[name^="upload-image"]').each(function(){
                _img.push($(this).val());
            })
            // 提交
            $.post("{:url('Home/Index/submitFeed')}",{feed:_feed.val(),img:_img},function(data){
                flag = true;
                if(data.code == '0'){   // 提示框、重置数据
                    _feed.val('');
                    $('.imgWrap').remove();
                    $('#myModal').modal('show');
                } else {
                    reminder(data.msg);
                }
            })
        })

    })

    //封装样式函数
    function imgAdd(urlobj){
        var html="<div class='imgWrap imglen'>" +
                "<img class='closeBtn' src='__PUBLIC__phone/images/close.png' alt=''/>" +
                "<img class='addImg' src="+urlobj+" alt=''>" +
                "<input type='hidden' name='upload-image[]' value='"+urlobj+"'>" +
                "</div>" ;
        $(".imgAdd").append(html);
    }
    function delImg(){
        $(".imgBox").remove();
    }
    function addbtn(){
        var html=`
             <div class="imgBox imglen">
               <img class="imgFile" src="__PUBLIC__phone/images/imgadd.png" alt="">
               <input class="Imgfiles" name="file" id="upload-image" type="file">
             </div>
        `;
        $(".imgAdd").prepend(html);
    }
</script>
</body>
</html>